// 检查是否含有插值表达式 {{  }}
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;

function genProps(attrs){ // 处理属性
  let str = '';
  attrs.forEach(item => {
    if(item.name === 'style'){ // 样式属性单独处理
      // 将字符串类型的style的值  转为键值对形式的对象 style="color: blue; font-size: 18px" => {color: 'blue', 'font-size': '18px'}
      const styleItem = item.value.split(';');
      let styleObj = {}
      styleItem.forEach(item => {
        const [key, val] = item.split(':');
        styleObj[key.trim()] = val.trim();
      });
      item.value = styleObj;
    }
    str += `${item.name}:${JSON.stringify(item.value)},`;
  });
  return `{${str.slice(0, -1)}}`
}

function genChildren(children){ // 处理子项节点
  if(!children){ return; }
  return children.map(child=>gen(child)).join(',')
}
function gen(child){ // 处理每一个子项
  if(child.type === 3){ // 文本节点
    if(defaultTagRE.test(child.text)){ // 含有插值表达式
      let lastIndex = defaultTagRE.lastIndex = 0; // 重置正则匹配的下标 正则带g也就是全局匹配才需要这么干
      let macth, arrs = []; // 获得当前匹配到的插值表达式
      while (macth = defaultTagRE.exec(child.text)) {
        let index = macth.index; // 获取匹配到的插值表达式的开始下标
        if(index !== 0){
          arrs.push(JSON.stringify(child.text.slice(lastIndex, index)));
        }
        lastIndex = defaultTagRE.lastIndex; // 获取匹配的结束下标 找到非插值表达式的部分
        arrs.push(`_s(${macth[1].trim()})`);
      }
      // 寻找最后的文本
      if(lastIndex < child.text.length){
        arrs.push(JSON.stringify(child.text.slice(lastIndex)));
      }
      return `_v(${arrs.join("+")})`
    } else {
      return `_v(${JSON.stringify(text)})`; // 不含则直接返回
    }
  } else if (child.type === 1){ // 元素节点 则递归
    return generate(child);
  }
}

function generate(el){
  return `_c('${el.tag}',${el.attrs.length ? `${genProps(el.attrs)}` : 'undefined'}${el.children ? `,${genChildren(el?.children)})` : ''}`
}

export default generate;